<template>
	<div>
		<span v-if="newlist">
			<span v-if="newlist.length>1" style="cursor: pointer;">
				<a-popover placement="right" trigger="click" style="width: 100px;" v-if="fileViewType=='popover'">
					<template slot="content">
						<p v-for="(item,index) in newlist" :key="index">
							<a-tooltip placement="top">
								<template slot="title">
									<span>{{item.split(';')[0]}}</span>
								</template>
								<a style="text-decoration: underline;" :href="isThumbnail?fileUrl+(item.split(';')[1]):fileUrl+(item.split(';')[0])"
									target="_blank" class="mr5"><b>{{fileName}}{{index+1}}</b></a>
							</a-tooltip>
						</p>
					</template>
					<b class="viewFile">查看{{fileName}}</b>
					<!-- <a-icon type="question-circle" /> -->
				</a-popover>
				<span v-for="(item,index) in newlist" :key="index" v-if="fileViewType=='list'">
					<a-tooltip placement="top">
						<template slot="title">
							<span>{{item.split(';')[0]}}</span>
						</template>
						<a style="text-decoration: underline;" :href="isThumbnail?fileUrl+(item.split(';')[1]):fileUrl+(item.split(';')[0])"
							target="_blank" class="mr5"><b>{{fileName}}{{index+1}}</b></a><b
							v-if="index<newlist.length-1">、</b>
					</a-tooltip>
				</span>
			</span>
			<span v-if="newlist.length==1">
				<span v-for="(item,index) in newlist" :key="index">
					<a-tooltip placement="top">
						<template slot="title">
							<span>{{item.split(';')[0]}}</span>
						</template>
						<a style="text-decoration: underline;" :href="isThumbnail?fileUrl+(item.split(';')[1]):fileUrl+(item.split(';')[0])"
							rel="external nofollow" target="_blank" class="mr5"><b>{{fileName}}
								<span v-if="showIndex">{{index+1}}</span></b></a>
						
					</a-tooltip>
				</span>
			</span>
		</span>
		<span v-if="!newlist||newlist.length==0">无</span>
	</div>
</template>

<script>
	export default {
		name: "viewAttch",
		props: {
			list: {
				type: [String,Array],
				default:()=>[]
			},
			fileViewType: {
				type: String,
				default: "popover"

			},
			fileName: {
				type: String,
				default: "附件"
			},
			showIndex: {
				type: Boolean,
				default: true
			},
			operator: { // 以某种操作符分割
				type: String,
				default: ''
			},
			//是否预览缩略图
			isThumbnail:{
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				fileUrl: process.env.VUE_APP_FILE_API,	
				newlist:this.list
			};
		},
		
		watch: {
			operator(newValue, oldValue) {
				if(newValue){
					this.newlist=this.list.split(operator)
				}else{
					this.newlist==this.list
				}
			}
		},
		methods:{}
	}
</script>

<style scoped lang="less">
	.viewFile {
		color: @primary-color;
	}
</style>
